<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { PayApi } from '@/api/pay';
import AuthBar from '@/components/authBar/index.vue';
import { BooleanNumber } from '@/enums';
import { PAY_STATUS } from '@/enums/pay.enums';
import { useRequest } from '@/hooks/useRequest';
import { buildAssetSource } from '@/utils';
import { currRoute, withQueryString } from '@/utils/router.utils';

// #ifdef APP-PLUS
const aliPayFace = uni.requireNativePlugin('XWC-Alipay-Face');
// #endif

const { query } = currRoute();

const { orderNo, payOrderId, redirectUrl } = query;

const loading = ref(false);

// 人脸支付状态
const facePayStatus = ref(PAY_STATUS.WAIT_PAY);

const {
  timeTask: pollingOrderStatus,
  clearTimeTask: stopPollingOrder
}
 = useRequest(
   () => PayApi.getStatus(Number(payOrderId)),
   {
     manual: true,
     pollingInterval: 1000,
     manualPolling: true,
     onSuccess(res) {
       facePayStatus.value = res.status;
       if (res.status === PAY_STATUS.SUCCESS) {
         stopPollingOrder();
         // 支付成功
         uni.navigateTo({
           url: withQueryString(redirectUrl, {
             orderId: payOrderId,
             orderNo
           })
         });
       }

       if (res.status === PAY_STATUS.FAIL) {
         stopPollingOrder();
       }
     }
   }
 );

function handleOpenFacePay() {
  facePayStatus.value = PAY_STATUS.WAIT_PAY;
  aliPayFace.startAlipayFace(res => {
    if (res.success === BooleanNumber.TRUE) {
      loading.value = true;
      console.log('>>>支付宝人脸支付start', res);
      PayApi.smilePay({
        ftoken: res.data,
        id: Number(query.payOrderId)
      }).then(() => {
        pollingOrderStatus();
      }).catch(() => {
        loading.value = false;
        facePayStatus.value = PAY_STATUS.FAIL;
      });
    }
    else {
      facePayStatus.value = PAY_STATUS.FAIL;
    }
  });
}

function handleBack() {
  uni.navigateBack({
    delta: 1
  });
}

onMounted(() => {
  aliPayFace.initAlipayFace(res => {
    console.log('>>>支付宝人脸支付init', res);
  });
});
</script>

<template>
  <view class="aliPayFace flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-160">
      <!-- 等待支付 -->
      <template v-if="facePayStatus === PAY_STATUS.WAIT_PAY">
        <view class="page-title mt-140">
          支付宝人脸支付
        </view>
        <view class="page-cover mt-100 flex-center">
          <image :src="buildAssetSource('face-pay.png')" class="h-560 w-560" />
        </view>

        <view class="mb-60 flex-center">
          <view class="confirm-btn w-708">
            <wd-button block :loading="loading" @click="handleOpenFacePay">
              支付宝人脸支付
            </wd-button>
          </view>
        </view>

        <view class="page-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 操作引导
          </view>
          <view class="tips-content px-20">
            请面对摄像头，保持面部在取景框内，确保光线充足，以便快速准确识别，识别过程中请勿晃动或遮挡面部
          </view>
        </view>
      </template>

      <!-- 支付异常 -->
      <view v-if="facePayStatus === PAY_STATUS.FAIL" class="h-full flex-center flex-col">
        <view class="pay-cover mx-auto flex-center">
          <image :src="buildAssetSource('login-close.png')" class="h-144 w-144" />
        </view>
        <view class="page-title mt-30">
          人脸支付失败
        </view>
        <view class="page-subtitle mt-10">
          支付过程中出现问题，请重新或选择其他支付方式
        </view>

        <view class="mt-80 flex-center flex-col">
          <view class="confirm-btn w-708">
            <wd-button block :loading="loading" icon="refresh1" @click="handleOpenFacePay">
              重新支付
            </wd-button>
          </view>
          <view class="confirm-btn w-708">
            <wd-button block :loading="loading" icon="arrow-left1" @click="handleBack">
              返回选择其他支付方式
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.aliPayFace {
  background-color: var(--bg-color);
  height: 100%;

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .page-subtitle {
    font-size: 28px;
    color: var(--secondary-text-color);
    text-align: center;
  }

  .pay-cover {
    width: 202px;
    height: 202px;
    border-radius: 50%;
    background: #e5efff;
  }

  .page-cover {
    background: #ffffff;
    border-radius: 20px;
    padding: 70px 100px;
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }

  .confirm-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    --wot-button-medium-loading: 36px;
    margin-top: 59px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
